<template>
  <div class="app-nav">
    <trigger />
    <breadCrumb />
    <div class="nav-right">
      <el-dropdown trigger="click">
        <el-avatar>行知</el-avatar>
        <template #dropdown>
          <el-dropdown-menu>
            <el-link
              :underline="false"
              target="_blank"
              href="https://gitee.com/wade369/vue-admin-template"
            >
              <el-dropdown-item>项目地址</el-dropdown-item>
            </el-link>
            <el-dropdown-item divided>退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Trigger from './Trigger.vue'
import BreadCrumb from './BreadCrumb.vue'

export default defineComponent({
  name: 'NavBar',
  components: { Trigger, BreadCrumb }
})
</script>

<style lang="scss" scoped>
@import '@/styles/vars.scss';

.app-nav {
  height: 50px;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid $border-color-extra-light;
}

.nav-right {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 20px;
}
</style>
